﻿@using FrogFoot.Models
@using FrogFoot.Utilities
@model List<FrogFoot.Entities.ISPProduct>
@{
    ViewBag.Title = "Products";
}

<style type="text/css">
    .activeBox {
        padding: 3px;
        padding-left: 35%;
        text-align: center;
    }

    .dirty {
        border: solid 1px black;
    }
</style>

<h2>Products</h2>

<div class="row">
    <div class="col-sm-9 form-group">
        @Html.ActionLink("Create Product", "Create", null, new { @class = "btn btn-success" })
    </div>
    <div class="col-sm-3 form-group">
        <div id="saveResult" class="pull-left" style="display: none;"><span style="color: green" class="glyphicon glyphicon-ok"></span> Saved
        </div>
        <button id="saveActiveChanges" class="btn btn-success pull-right">Save Active Changes</button>
    </div>
    <div class="col-sm-3 col-sm-offset-9">
        <p id="changeCountContainer" style="display: none; text-align: right;">Unsaved active changes: <strong id="changeCount"></strong></p>
    </div>
</div>

<table id="productTable" class="table table-striped table-responsive">
    <thead>
        <tr>
            <td></td>
            <td>Name</td>
            <td>Down speed</td>
            <td>Up speed</td>
            <td>Cost/pm</td>
            <td>Special</td>
            <td>Capped</td>
            <td>M2M Client</td>
            <td>24M Client</td>
            <td>M2M Frogfoot</td>
            <td>Description</td>
            <td>Active <span class="glyphicon glyphicon-info-sign" style="color: green" data-toggle="tooltip" title="Show or hide your product from the public for viewing and ordering"></span></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        @{
            if (Model.Any())
            {
                foreach (var prod in Model)
                {
                    <tr>
                        <td>
                            @if (prod.ISPLogo != null)
                            {
                                <img src="~/Assets/ISPProductLogo/@prod.ISPLogo.AssetPath" width="180" height="60" alt="product image" />
                            }
                        </td>
                        <td>@prod.ProductName</td>
                        <td>@prod.LineSpeed</td>
                        <td>@prod.UpSpeed</td>
                        <td>@prod.MonthlyCost</td>
                        <td><input type="radio" @(prod.IsSpecial == true ? "checked='checked'" : "") class="radio"/></td>
                        <td><input type="radio" @(prod.IsCapped ? "checked='checked'" : "") class="radio"/></td>
                        <td><input type="radio" @(prod.IsM2MClient ? "checked='checked'" : "") class="radio" /></td>
                        <td><input type="radio" @(prod.Is24MClient ? "checked='checked'" : "") class="radio" /></td>
                        <td><input type="radio" @(prod.IsM2MFrogfootLink ? "checked='checked'" : "") class="radio" /></td>
                        <td>@prod.Description.Truncate(30)</td>
                        <td>
                            <div class="activeBox">
                                <input class="checkbox" data-prodid="@prod.ISPProductId" type="checkbox" @(prod.IsActive ? "checked='checked'" : "")/>
                            </div>
                        </td>
                        <td>@Html.ActionLink("Details", "Details", new { prodId = prod.ISPProductId }, new { @class = "btn btn-default" })</td>
                        <td>
                            @if (!prod.Orders.Any() || prod.Orders.All(o => o.Status == OrderStatus.Canceled))
                            {
                                @Html.ActionLink("Edit", "Edit", new {prodId = prod.ISPProductId}, new {@class = "btn btn-default"})
                            }
                            else
                            {
                                <button class="btn btn-default" 
                                        data-toggle="tooltip"
                                        title="Product cannot be edited because there are active orders for it." 
                                        disabled="disabled">Edit</button>
                            }

                        </td>
                    </tr>
                }
            }
        }
    </tbody>
</table>

@section scripts
{
    <script type="text/javascript">
        $(function () {
            $('#productTable').DataTable({
                "ordering": true,
                "fnDrawCallback": function () {
                    BuildCheckedList();
                }
            });

            //store initial active items to dirty check against
            var initActiveList = [];

            //store the count of changes made
            //this is so that when you're on a different page and it doesnt save the changes you know to page to them and save
            var changeCount = 0;

            //get all checkbox items
            function BuildCheckedList() {
                initActiveList = [];
                $('.activeBox > .checkbox').each(function () {
                    initActiveList.push(this.checked);
                });
            }

            function UpdateChangeCount(changes) {
                if (changes > 0) {
                    $('#changeCount').text(changes);
                    $('#changeCountContainer').show();
                } else {
                    $('#changeCountContainer').hide();
                }
            }

            BuildCheckedList();

            //check if the clicked checkbox has changed compared to initActiveList
            $('#productTable').on('click', '.checkbox', function () {
                var $this = $(this);

                var index = $this.index('.checkbox');
                var corresponding = initActiveList[index];

                if (corresponding == $this.is(':checked')) {
                    $this.parent().removeClass('dirty');
                    changeCount--;
                } else {
                    $this.parent().addClass('dirty');
                    changeCount++;
                }
                UpdateChangeCount(changeCount);
            });

            //save only the pproducts that have had IsActive changes
            $('#saveActiveChanges').click(function () {

                var products = [];
                $('.dirty > .checkbox').each(function () {
                    products.push({ prodId: $(this).data('prodid'), isActive: $(this).is(':checked') });
                });

                if (products.length) {
                    $.ajax({
                        url: '@Url.Action("SaveProductsStatus", "Products")',
                        type: "POST",
                        dataType: "json",
                        contentType: 'application/json',
                        traditional: true,
                        data: JSON.stringify({ products: products }),
                        success: function (data) {
                            $('.dirty').delay(3000).removeClass('dirty');
                            $('#saveResult').show().delay(3000).fadeOut('slow');
                            UpdateChangeCount(changeCount);
                            BuildCheckedList();
                        }
                    });
                }
            });

            $('[data-toggle="tooltip"]').tooltip();
        })
    </script>
}